<template>
  <div>
    <navbar></navbar>

    <div class="main">
      <!-- 标题 -->
      <div class="title">
        <h1>一级标题</h1>
      </div>

      <div class="banner">
        <img
          src="http://www.petly.net/data/attachment/forum/201903/04/222410xzfh3hoo8shtio1p.jpg"
          alt
        />
        <div class="minImg">
          <img
            src="http://www.petly.net/data/attachment/forum/201903/04/222436wxueuuiunbn4me2u.jpg"
            alt
          />
        </div>
      </div>

      <div class="sec_title">
        <h2>二级标题</h2>
        <p>正文（nidesjiohfiosjighhsiohgisiohisoah nidesjiohfiosjighhsiohgisiohisoah nidesjiohfiosjighhsiohgisiohisoah nidesjiohfiosjighhsiohgisiohisoah nidesjiohfiosjighhsiohgisiohisoah )</p>
      </div>

      <div class="n_Pic">
        <div>
          <img src="@/assets/news/n_dog.jpg" alt />
        </div>
        <div>二级标题</div>
        <div>
          <img src="@/assets/news/n_dog.jpg" alt />
        </div>
        <div>二级标题</div>
        <div>
          <img src="@/assets/news/n_dog.jpg" alt />
        </div>
        <div>二级标题</div>
        <div>
          <img src="@/assets/news/n_dog.jpg" alt />
        </div>
        <div>二级标题</div>
        <div>
          <img src="@/assets/news/n_dog.jpg" alt />
        </div>
      </div>

      <div class="sec_title">
        <h2>二级标题</h2>
        <p>正文（nidesjiohfiosjighhsiohgisiohisoah nidesjiohfiosjighhsiohgisiohisoah nidesjiohfiosjighhsiohgisiohisoah nidesjiohfiosjighhsiohgisiohisoah nidesjiohfiosjighhsiohgisiohisoah )</p>
      </div>

      <!-- 通栏图 -->
      <div class="pic_banner">
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580913503434&di=3099b9c9c2303ca80b706d2042763c79&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180620%2F15177bc369ac4875aece301edb843275.jpeg"
          alt
        />

        <div class="pic_title">
          <div class="t_l">
            <p>二级标题</p>
          </div>

          <div class="t_m">
            <div></div>
            <h1>一级标题</h1>
          </div>
        </div>
      </div>

      <!-- 正文 -->

      <div class="n_text">
        <p>正文askjdfaskjfdhjksadhfjsdhsdfsadfdasfdsafdsafhbsaddjhdfkasjfdsafdsafhbsaddjhdfkasjfdsafdsafhbsaddjhdfkasjfdsafdsafhbsaddjhdfkasjksajhdfjksahfjksdahjkfhdsjkfhjksdhf</p>
      </div>

      <div class="n_text">
        <p>正文askjdfaskjfdhjksadhfjsdhsdfsadfdas fdsafdsafhbsaddjhdfkasj ksajhdfjksahfjksdahjkfhdsjkfhjksdhf</p>
      </div>
    </div>

    <div class="comments">
      <div class="c_title">评论区</div>
      <div class="c_content">
        <h2>二级标题</h2>
        <el-avatar :size="64" :src="circleUrl"></el-avatar>
        <div class="dateBut">
          <div class="dateNow">
            <span>2020-1-1</span>
            <span>2020-1-1</span>
          </div>
          <el-button>点击回复</el-button>
        </div>

        <el-input
          type="textarea"
          :rows="5"
          placeholder="登录即可评论"
          v-model="textarea"
          disabled
          resize="none"
        ></el-input>

        <div class="comBtn">
            <el-button>点击评论</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import navbar from '../../components/navbar'
export default {
  data() {
    return {
      circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      textarea: ''
    }
  },
  components: {
    navbar
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 1100px;
  margin: 0 auto;
  //   一级标题
  .title {
    text-align: center;
    color: #333333;
  }
  // 大图配小图
  .banner {
    width: 100%;
    position: relative;
    > img {
      width: 100%;
    }
    .minImg {
      width: 300px;
      height: 300px;
      position: absolute;
      right: 0;
      bottom: 0;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
  // 二级标题
  .sec_title {
    text-align: center;
    padding: 0 200px;
    box-sizing: border-box;
    h2 {
      margin: 50px 0;
    }
    p {
      color: #333;
      font-size: 18px;
      line-height: 2;
      margin: 30px 0;
      word-wrap: break-word;
    }
  }
  // 神奇九宫图
  .n_Pic {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    margin-top: 30px;
    div {
      width: 33%;
    }
    div:nth-of-type(n) {
      > img {
        width: 100%;
      }
    }
    div:nth-of-type(2n) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  // 通栏图
  .pic_banner {
    width: 100%;
    height: 500px;
    position: relative;
    > img {
      width: 100%;
      height: 100%;
    }
    .pic_title {
      width: 100%;
      height: 100%;
      position: absolute;
      //   background: #444;
      left: 0;
      top: 0;
      display: flex;
      justify-content: space-around;
      .t_l {
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          width: 10px;
          color: #000;
          font-size: 30px;
        }
      }
      .t_m {
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;

        > div {
          width: 160px;
          height: 50px;
          background: #fff;
          position: relative;
        }
        h1 {
          font-size: 50px;
          position: absolute;
          top: 50%;
          margin-top: -50px;
          margin-left: 50px;
          color: #000;
        }
      }
    }
  }
  // 正文文本设置
  .n_text {
    color: #333;
    font-size: 18px;
    line-height: 2;
    margin: 30px 0;
    word-wrap: break-word;
  }
}
// 评论区
.comments {
  width: 1100px;
  margin: 0 auto;
  .c_content {
    .dateBut {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .dateNow {
        span {
          margin-right: 50px;
        }
      }
    }
    .el-textarea {
      margin: 30px 0;
    }
    .comBtn{
        display: flex;
        justify-content: flex-end;
    }
  }
}
</style>